<template>
  <div class="category">
    <!-- 标题 -->

    <!-- 搜索 -->

    <!-- 分类 -->
    <div class="category-container">
      <!-- 左边 -->
      <scroll
        :data="categoryList"
        ref="leftMenu"
      >
        <div class="menu-wrapper">
          <ul>
            <li class="menu-item"
                v-for="(menu,index) in categoryList"
                :key="index"
                :class="{current: index === currentIndex}"
                @click="selectLeft(index,$event)"
            >
              {{menu.menuName}}
            </li>
          </ul>
        </div>
      </scroll>

      <!-- 右边 -->
      <scroll
        :data="categoryList"
        ref="rightMenu"
        :listenScroll="true"
        :probeType="3"
        @scroll="scrollHeight"
      >
          <div class="submenu-wrapper">
              <ul>
                <li class="sub-menu-li" ref="rightItem" v-for="(menu,idx) in categoryList" :key="idx">
                  <div class="sub-title">
                    <div class="sub-title-text">{{menu.menuName}}</div>
                    <div class="check-more">查看更多>></div>
                  </div>
                  <ul class="sub-type-list">
                    <li class=sub-type-item v-for="(item,i) in menu.subTypeList">
                      <img :src="item.image" class="sub-type-img">
                      <span class="sub-type-item-name">{{item.name}}</span>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
      </scroll>
    </div>
    <!-- 底部 -->
    <tabBar :selected="2"></tabBar>
  </div>
</template>

<script>
  import Scroll from '@/components/scroll/scroll';
  import tabBar from '@/components/tabBar/tabBar';
  export default {
    name: 'Category',
    data() {
      return {
        categoryList: [], // 分类数据
        scrollY: 0, // Y轴滚动的值
        rightTops: [], // 每个分类相对应的li内容的高度
      }
    },
    components: {
      tabBar,
      Scroll
    },
    mounted () {
      this.pageInit();
    },
    computed: {
      currentIndex () {
        const {scrollY,rightTops} = this;
        let index = rightTops.findIndex((height,index) =>{
          return scrollY >= rightTops[index] && scrollY < rightTops[index + 1]
        })
        if (scrollY > rightTops[index] + 50) {
          index++;
        }
        return index;
      }
    },
    methods: {
      pageInit () {
        this.$axios.get('/static/json/categoryMenusOne.json',{

        }).then( res => {
          if (res.data.status === 1) {
            this.categoryList = res.data.categoryMenus;
            this.$nextTick(() => {
              this._calculateHeight();
              this.$refs.rightMenu.refresh();
            })
          }


        }).catch( err => {
             console.log(err)
        })
      },
      // 点击滚动
      selectLeft (index,event) {
        if (!event._constructed) {
          return
        }
        let rightItem = this.$refs.rightItem;
        let el = rightItem[index]
        this.$refs.rightMenu.scrollToElement(el,300)
      },
      scrollHeight (pos) {
        this.scrollY = Math.abs(Math.round(pos.y))
      },
      // 计算右侧对应的高度
      _calculateHeight () {
          let lis = this.$refs.rightItem;
          let height = 0
          this.rightTops.push(height)
          Array.prototype.slice.call(lis).forEach(li => {
            height += li.clientHeight
            this.rightTops.push(height)
          })
        }
    }
  }

</script>
<style scoped lang="less">
  .category {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    overflow: hidden;
  }

  .category-container {
    display: flex;
    position: absolute;
    top: 60px;
    bottom: 50px;
    width: 100%;
    overflow: hidden;
  }

  /* 左边 */
  .menu-wrapper {
    background-color: #e0e0e0;
    width: 80px;
    flex: 0 0 80px;
  }

  .menu-item {
    width: 100%;
    height: 60px;
    background: #fafafa;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: lighter;
    color: #666;
    position: relative;
  }

  .current {
    color: #e02e24;
    background: #fff;
  }

  .current:before {
    content: '';
    background-color: #e02e24;
    width: 4px;
    height: 30px;
    position: absolute;
    left: 0;
  }


  /* 右边 */
  .submenu-wrapper {
    flex: 1;
    background: #fff;
  }

  .sub-title {
    box-sizing: border-box;
    padding: 0px 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: #999;
  }

  .line {
    flex: 1;
    height: 1px;
    background-color: #ccc;
  }

  .sub-title-text {
    font-size: 14px;
    margin: 10px;
    text-align: center;
    position: relative;
  }

  .sub-type-list {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .sub-type-item {
    width: 33.3%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 5px 0;
  }

  .sub-type-img {
    width: 50px;
  }

  .sub-type-item-name {
    font-size: 12px;
  }

</style>
